<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>百年征程</title>
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/second.css">
		<link rel = 'stylesheet' href="{{ STATIC_URL }}open/font_2669378_1z1i76b0nw9/iconfont.css">
		<link rel="stylesheet" href="{{ STATIC_URL }}open/css/sortable.min.css">
		<script type="text/javascript" src="{{ STATIC_URL }}js/sortable.min.js"></script>
		<!--插入背景音乐-->
		<audio id="myaudio" controls="controls" src="{{ STATIC_URL }}open/music/bkmusic.mp3" autoplay="autoplay" loop="loop" style="height: 0;" >

		</audio>
		<script type="text/javascript">
			function toggleSound(){
				var music=document.getElementById("myaudio");//获取id
				console.log(music);
				console.log(music.paused);
				if(music.paused){   //判断是否播放
					music.paused = false;
					music.play();
				}
			}
			setInterval("toggleSound()",1);
		</script>
	</head>
	<body>
		<!-- 巨屏轮播图 -->
		<div id="app"></div>

		<script src='{{ STATIC_URL }}js/react.min.js'></script>
		<script src='{{ STATIC_URL }}js/react-dom.min.js'></script>
		<script src='{{ STATIC_URL }}js/index.min.js'></script>



		<!-- 瀑布流 -->
		<main class="sortable">
			<div class="container">
				<div class="wrapper">
					<!-- <ul class="sortable__nav nav">
						<li>
							<a data-sjslink="all" class="nav__link">
								所有
							</a>
						</li>
						<li>
							<a data-sjslink="flatty" class="nav__link">
								扁平化
							</a>
						</li>
						<li>
							<a data-sjslink="funny" class="nav__link">
								收起
							</a>
						</li>
					</ul> -->
					<div id="sortable" class="sjs-default">
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/rotate3d_3.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1921</h2>
									<p class="card__text">
									1921年，中国共产党从浙江嘉应南湖中的“一叶扁舟”中出发。如今共产党经历了百年历程，带领中国人民谱写灿烂辉煌。中国共产党再也不是当初的扁舟，成为了现在的“一艘巨轮。”
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/3d.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1923</h2>
									<p class="card__text">
										中共三大的召开和第一次国共合作的建立，声势浩大、轰轰烈烈的反帝反封建的革命群众运动从这里开始。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/ldyx.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1960-1970</h2>
									<p class="card__text">
										“两弹一星”精神生生不息，永远的镌刻在中国的大地上。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/czxs.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1934-1935</h2>
									<p class="card__text">
										跨雪山，过草地，行程数万里，创造了气吞山河的人间奇迹。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/npwlg.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1981-1986</h2>
									<p class="card__text">
										中国女排五连冠，中国女排的第一个黄金时代，全社会掀起了学习女排精神的热潮。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/djzy.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1949</h2>
									<p class="card__text">
										渡江战役的胜利是靠老百姓用小船划出来的，百万雄师身后，是千千万万的人民！
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/tdgm.jpg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1927-1937</h2>
									<p class="card__text">
										中国共产党土地政策的重要改变，极大地提高了农民生产的积极性，推动人民解放战争的顺利发展。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/xqnyd.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1915-1923</h2>
									<p class="card__text">
										中国共产党的起点，陈独秀、李大钊、这些革命的“新青年”都曾参与了这场近代史上空前的思想解放运动。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/dybxf.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1954</h2>
									<p class="card__text">
										毛泽东领导起草，1.5亿人参与讨论，“人民的宪法”全票通过......新中国第一步宪法诞生。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/xasb.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1936</h2>
									<p class="card__text">
										震惊中外的西安事变————国内战争走向抗日民族战争的转折点。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="flatty">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/xzhpjf.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1951</h2>
									<p class="card__text">
										西藏和平解放，实现了祖国大陆的完全统一。
									</p>
								</div>
							</div>
						</div>
						<div data-sjsel="funny">
							<div class="card">
								<img class="card__picture" src="{{ STATIC_URL }}open/images/bqhy.jpeg" alt="">
								<div class="card-infos">
									<h2 class="card__title">1927</h2>
									<p class="card__text">
										“枪杆子里出政权”！中国革命的紧急关头，八七会议给中国革命指明新的出路。
									</p>
								</div>
							</div>
						</div>
						
						
					</div>
				</div>
			</div>
		</main>

		<script type="text/javascript">
			document.querySelector('#sortable').sortablejs()
		</script>
		
		<div class="footer">
			<div class="location">
				<p><a href="{{ SITE_URL }}marchOneHundred/">当前位置</a>&nbsp;&nbsp;&nbsp;>>&nbsp;&nbsp;&nbsp;
					<a href="{{ SITE_URL }}marchOneHundred/">百年征程</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</p>
			</div>
			
				<div class="footer_nav">
					<span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span><span class="iconfont icon-huabian-15"></span>
				
				</div>
				<p><br></p>
				<ul>
					<li>
						<span class="iconfont icon-dangjian"></span>
						<a href="{{ SITE_URL }}">首页</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-fazhan1"></span>
						<a href="{{ SITE_URL }}marchOneHundred/">百年征程</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dangyuan"></span>
						<a href="{{ SITE_URL }}founder/">党的创始人</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-huojianfeiyue"></span>
						<a href="{{ SITE_URL }}leap/">伟大的飞跃</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-dahuiricheng"></span>
						<a href="{{ SITE_URL }}congress/">党的全国代表大会</a>
						&nbsp;&nbsp;/&nbsp;&nbsp;
					</li>
					<li>
						<span class="iconfont icon-sixiangjianshe"></span>
						<a href="{{ SITE_URL }}ideology/">中国共产党指导思想</a>
					</li>
				</ul>
			</div>		


	</body>

<script>
	class CitiesSlider extends React.Component {
  constructor(props) {
    super(props);

    this.IMAGE_PARTS = 4;

    this.changeTO = null;
    this.AUTOCHANGE_TIME = 4000;

    this.state = { activeSlide: -1, prevSlide: -1, sliderReady: false };
  }

  componentWillUnmount() {
    window.clearTimeout(this.changeTO);
  }

  componentDidMount() {
    this.runAutochangeTO();
    setTimeout(() => {
      this.setState({ activeSlide: 0, sliderReady: true });
    }, 0);
  }

  runAutochangeTO() {
    this.changeTO = setTimeout(() => {
      this.changeSlides(1);
      this.runAutochangeTO();
    }, this.AUTOCHANGE_TIME);
  }

  changeSlides(change) {
    window.clearTimeout(this.changeTO);
    const { length } = this.props.slides;
    const prevSlide = this.state.activeSlide;
    let activeSlide = prevSlide + change;
    if (activeSlide < 0) activeSlide = length - 1;
    if (activeSlide >= length) activeSlide = 0;
    this.setState({ activeSlide, prevSlide });
  }

  render() {
    const { activeSlide, prevSlide, sliderReady } = this.state;
    return /*#__PURE__*/(
      React.createElement("div", { className: classNames('slider', { 's--ready': sliderReady }) }, /*#__PURE__*/
      React.createElement("p", { className: "slider__top-heading" }, "Revolutionary Spirit"), /*#__PURE__*/
      React.createElement("div", { className: "slider__slides" },
      this.props.slides.map((slide, index) => /*#__PURE__*/
      React.createElement("div", {
        className: classNames('slider__slide', { 's--active': activeSlide === index, 's--prev': prevSlide === index }),
        key: slide.city }, /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-content" }, /*#__PURE__*/
      React.createElement("h3", { className: "slider__slide-subheading" }, slide.country || slide.city), /*#__PURE__*/
      React.createElement("h2", { className: "slider__slide-heading" },
      slide.city.split('').map(l => /*#__PURE__*/React.createElement("span", null, l))), /*#__PURE__*/

      React.createElement("p", { className: "slider__slide-readmore" }, "查看详情>>")), /*#__PURE__*/

      React.createElement("div", { className: "slider__slide-parts" },
      [...Array(this.IMAGE_PARTS).fill()].map((x, i) => /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part", key: i }, /*#__PURE__*/
      React.createElement("div", { className: "slider__slide-part-inner", style: { backgroundImage: `url(${slide.img})` } }))))))), /*#__PURE__*/






      React.createElement("div", { className: "slider__control", onClick: () => this.changeSlides(-1) }), /*#__PURE__*/
      React.createElement("div", { className: "slider__control slider__control--right", onClick: () => this.changeSlides(1) })));


  }}


const slides = [
{
  city: '红船精神',
  country: '浙江嘉兴南湖',
  img: '{{ STATIC_URL }}open/images/hcjs.jpg' },

{
  city: '井冈山精神',
  country:'井冈山革命根据地',
  img: '{{ STATIC_URL}}open/images/jgsjs.jpg' },

{
  city: '长征精神',
  country: '江西瑞金————甘肃会宁',
  img: '{{ STATIC_URL }}open/images/czjs.jpg' },

{
  city: '延安精神',
  country: '陕西延安',
  img: '{{ STATIC_URL }}open/images/yajs.jpg' },

{
  city: '大庆精神',
  country: '黑龙江大庆油田',
  img: '{{ STATIC_URL }}open/images/dqjs.jpg' }];



ReactDOM.render( /*#__PURE__*/React.createElement(CitiesSlider, { slides: slides }), document.querySelector('#app'));
</script>

</html>
